<template>
  <teleport to="body">
    <div v-if="modelValue" class="ttt-modal-bg" :style="{ zIndex }" @click="handleClick('cancel',true)"></div>
  </teleport>
  <teleport to="body">
    <transition name="modal">
      <div v-if="modelValue" class="ttt-modal" :class="{ padding: isPadding }" :style="{ zIndex }">
        <slot name="title">
          <div v-if="title" class="title">{{ title }}</div>
        </slot>
        <div class="content">
          <slot name="default"></slot>
        </div>
        <slot name="footer">
          <div v-if="isFooter" class="footer gap28">
            <t-button
              v-if="isClose"
              class="f1"
              type="default"
              :radius="radiusBtn"
              :loading="cancelLoading"
              :disabled="defineLoading"
              @click="handleClick('cancel')">
              {{ cancelText || $t('index.cancel') }}
            </t-button>
            <t-button
              class="f1"
              type="primary"
              :radius="radiusBtn"
              :loading="defineLoading"
              :disabled="cancelLoading"
              @click="handleClick('define')">
              {{ defineText || $t('index.define') }}
            </t-button>
          </div>
        </slot>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import TButton from '../TButton/TButton.vue'
import { ref } from 'vue'
import { getZIndex } from '../utils/utils'
import type { PropType } from 'vue'
import type { TModalBeforeCloseParams } from '../types/components'

const emits = defineEmits<{
  (e: 'cancel', value: boolean): void
  (e: 'define', value: boolean): void
  (e: 'update:modelValue', value: boolean): void
}>()

const props = defineProps({
  // 绑定数据
  modelValue: {
    type: Boolean as PropType<boolean>,
    required: true
  },
  // 标题 不填标题则没有标题
  title: {
    type: String as PropType<string>,
    default: ''
  },
  // 是否需要padding间距 默认需要
  isPadding: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 取消按钮文本
  cancelText: {
    type: String as PropType<string>,
    default: ''
  },
  // 确定按钮文本
  defineText: {
    type: String as PropType<string>,
    default: ''
  },
  // 是否点击模态窗关闭
  closeModal: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 是否有取消按钮
  isClose: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 是否有取消按钮
  isFooter: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 关闭之前
  beforeClose: {
    type: Function as PropType<TModalBeforeCloseParams>,
    default: null
  },
  // 圆角按钮
  radiusBtn: {
    type: Boolean as PropType<boolean>,
    default: false
  }
})

const zIndex = ref<number>(getZIndex())
const cancelLoading = ref<boolean>(false)
const defineLoading = ref<boolean>(false)

const handleClick = (type: 'cancel' | 'define', isModal: boolean = false) => {
  if (isModal && !props.closeModal) return
  if (props.beforeClose && typeof props.beforeClose === 'function') {
    if (type === 'cancel') {
      cancelLoading.value = true
      defineLoading.value = false
    } else if (type === 'define') {
      defineLoading.value = true
      cancelLoading.value = false
    }
    props.beforeClose(type, (confirm: boolean): void => {
      defineLoading.value = false
      cancelLoading.value = false
      if (confirm) {
        emits('update:modelValue', false)
      }
    })
    return
  }
  emits(type, true)
  emits('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.ttt-modal-bg {
  position: fixed;
  inset: 0;
  background-color: var(--theme-modal);
}

.ttt-modal {
  border-radius: var(--modal-rudias);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 690rem;
  max-height: 90vh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0);
  background-color: var(--theme-bg);

  &.padding {
    padding: 54rem 58rem;
  }

  &.modal-enter-active, &.modal-leave-active {
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: all 0.2s;
  }

  &.modal-enter-from, &.modal-leave-to {
    transform: translate3d(-50%, -50%, 0) scale(0.5);
    opacity: 0;
  }

  .title {
    text-align: center;
    font-size: 48rem;
    height: 48rem;
    line-height: 48rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #000;
    padding-bottom: 70rem;
  }

  .content {
    width: 100%;
    height: calc(100% - 70rem - 88rem - 70rem - 48rem - 54rem * 2);
    overflow-y: auto;
    position: relative;

    .content-not-allow {
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
  }

  .footer {
    padding-top: 70rem;
    height: 88rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
}
</style>
